<template>
    <div>
        <myheader />
        <van-tabs v-model="active">
            <van-tab title="用户名登录"  >               
            
                            <van-field style="width:300px"
                                v-model="username"
                                name="用户名"
                                label="用户名"
                                placeholder="用户名"
                                :rules="[{ required: true, message: '请填写用户名' }]"
                            />
                            <van-field style="width:300px"
                                v-model="password"
                                type="password"
                                name="密码"
                                label="密码"
                                placeholder="密码"
                                :rules="[{ required: true, message: '请填写密码' }]"
                            />
                            <!-- <drag-verify
                                :width='width'
                                :height='height'
                                success-text='验证成功'
                                text='向右滑动验证'
                                ref="Verify"
                            /> -->
                            <van-button round block type="primary" native-type="submit" style="width: 100px;margin-left: 90px;margin-top: 20px" @click="userlogin">登录</van-button>

            </van-tab>


            <van-tab title="手机登录"  >
                        
                        <van-field style="width:300px"
                                v-model="mobile"
                                name="mobile"
                                label="手机号"
                                placeholder="手机号"
                                :rules="[{ required: true, message: '请填写手机号' }]"
                            />

                            <van-button type="info" @click="sendcode"
                            
                            >点击发送验证码</van-button> 
                            
                            <van-count-down :time="time" 
                                :auto-start="false"
                                v-show="show"
                                format='还剩ss秒'
                                ref="countDown" 
                                @finish='finish'
                            
                            />
                        
                            <van-field style="width:300px"
                                v-model="code"
                                name="code"
                                label="验证码"
                                placeholder="验证码"
                                :rules="[{ required: true, message: '请填写验证码' }]"
                            />
                            

                            <!-- <drag-verify
                                :width='width'
                                :height='height'
                                success-text='验证成功'
                                text='向右滑动验证' 
                                ref="Verify" -->
                            <!-- /> -->
                            <van-button round block type="primary" native-type="submit" style="width: 100px;margin-left: 90px;margin-top: 20px" @click="mobilelogin">手机登录</van-button>
                

            </van-tab>
            
        </van-tabs> 
    </div>
</template>

<script>

import myheader from './myheader'
import dragverify from 'vue-drag-verify'

export default {
        // 注册组件
        components:{
            'myheader':myheader,
            'drag-verify':dragverify
        },
        data(){
            return{
                username:'',
                password:'',
                mobile:'',
                width:300,
                height:40,
                active:1,
                code:'',
                time:30000,
                show:false
            }
        },
        //方法
        methods:{
            //用户名登录
            userlogin(){
                // if(this.$refs.Verify.isPassing){
                    this.$axios.get('users/login/?username='+this.username+'&password='+this.password).then(res=>{
                        if(res.data.code == 200){
                            //存储客户信息
                            localStorage.setItem('userid',res.data.userid)
                            localStorage.setItem('username',res.data.username)
                            localStorage.setItem('token',res.data.token)
                            this.$router.push('/userinfo')
                            this.$toast.success(res.data.msg)
                        }else if(res.data.code == 20030){
                            this.$toast.success(res.data.msg)
                        }else if(res.data.code == 20020){
                            this.$toast.success(res.data.msg)
                        }else if(res.data.code == 20060){
                            this.$toast.success(res.data.msg)
                        }
                    })
                // }
            },
            //手机登录
            mobilelogin(){
                // if(this.$refs.Verify.isPassing){
                    this.$axios.get('users/login/',{params:{code:this.code,mobile:this.mobile}}).then(res=>{
                        if(res.data.code == 200){
                            //存储客户信息
                            localStorage.setItem('userid',res.data.userid)
                            localStorage.setItem('username',res.data.username)
                            localStorage.setItem('token',res.data.token)
                            this.$toast.success(res.data.msg)
                            this.$router.push('/userinfo')
                        }else if(res.data.code == 20040){
                            this.$toast.fail('验证码不存在，请重新发送')
                        }else if(res.data.code == 20050){
                            this.$toast.fail(res.data.msg)
                        }
                    })
                // }
            },
            //发送验证码
            sendcode(){
                this.$axios.post('users/sendcode/',{'mobile':this.mobile}).then(res=>{
                    if(res.data.code == 200){
                        this.show=true
                        this.$refs.countDown.start()
                        
                        this.$toast.success(res.data.msg)
                    }else if (res.data.code == 10015){
                        this.$toast.fail(res.data.msg)
                    }else if (res.data.code == 10012){
                        this.$toast.fail(res.data.msg)
                    }else{
                        this.$toast.fail(res.data.msg)
                    }

                })
            },
            // 解决开始时间从点击获取验证码才开始倒计时
            finish(){
            this.isshow=false
            this.$refs.countDown.reset();
            }
        },
        //挂载 初始化
        mounted() {
            
        },
    }
</script>

<style scoped>

</style>